import { Component } from 'react';
// 支持context实现多层嵌套组件间的通信；
import PropTypes from 'prop-types';

/**
 * 如果简单的单层嵌套组件通信，则使用props食用更佳；
 * 多层嵌套使用props可就显得臃肿了；
 * 解决办法：引入context
 */
const Topic = (props) => {
  return (
    <div>
      父级Topic：<TopicChild />
    </div>
  )
}
// 通过context拿到公共变量
const TopicChild = (props, context) => {
  return (
    <div>
      TopicChild：{context.color}
    </div>
  )
}

export default class ContextComponent extends Component {
  // 在源组件中定义通信值，相当于公共store
  getChildContext () {
    return {
      color: "red"
    }
  }
  render () {
    return (
      <div>
        <Topic />
      </div>
    )
  }
}
// 目标组件通过context接受源store中抛出的通信值
TopicChild.contextTypes = {
  color: PropTypes.string,
}
ContextComponent.childContextTypes = {
  color: PropTypes.string,
}